import styles from './index.module.less'
import {Button, Divider, Drawer, Space} from "antd";
import React, {FC, useEffect, useRef, useState} from "react";
import WorkshopLayoutInfoBasics from "../workshop-layout-info-basics";
import WorkshopLayoutInfoPatrol from "../workshop-layout-info-patrol";
import WorkshopLayoutInfoMaintenance from "../workshop-layout-info-Maintenance";
import {Graph} from "@antv/x6";
import WorkshopLayoutInfoReform from '../workshop-layout-info-reform';
import WorkshopLayoutInfoEmergency from "../workshop-layout-info-emergency";
import WorkshopLayoutInfoTest from "../workshop-layout-info-test";

interface WorkshopLayoutInfoProps {
    id?: string
    treeType:string
    drawerOpen?: boolean
    onClose: () => void
    onChange: (res: Graph.BackgroundManager.Options) => void;
    onSuccess: () => void
}

const WorkshopLayoutInfo: FC<WorkshopLayoutInfoProps> = (props) => {

    const [tabNo, setTabNo] = useState<number>(1)
    const [open, setOpen] = useState(props.drawerOpen);
    const basicsRef = useRef<any>();
    const patrolRef = useRef<any>();
    const reformRef = useRef<any>();
    const emergencyRef = useRef<any>();
    const testRef = useRef<any>();

    useEffect(() => {
    }, [props.id])

    useEffect(() => {
        setOpen(props.drawerOpen)
    }, [props.drawerOpen])


    const tabs = [
        {
            label: '基础',
            key: 1,
        },
        {
            label: '维保',
            key: 2,
        },
        {
            label: '改造',
            key: 3,
        },
        {
            label: '应急',
            key: 4,
        },
        {
            label: '测试',
            key: 5,
        },
    ];

    const drawerTitle = (<div>
        <div className={styles.contentTitle}>配置</div>
        <Divider style={{margin: '20px 0 0 0'}}/>
        <div style={{display: 'flex', justifyContent: 'space-around', width: '100%'}}>
            {tabs && tabs.map((item: any, index: number) => (<div key={index}>{
                tabNo == item.key ?
                    <div>
                        <Button size={'large'} type={'link'}>{item.label}</Button>
                        <div style={{backgroundColor: '#438efd', height: '2px', width: '100%'}}></div>
                    </div>
                    :
                    <div>
                        <Button size={'large'} type={'text'} onClick={() => {
                            setTabNo(item.key)
                        }}>{item.label}</Button>
                    </div>
            }
            </div>))}
        </div>
    </div>)


    const handleSubmit = () => {
        if (tabNo == 1) {
            basicsRef.current.handleSubmit();
        } else if (tabNo == 2) {
            patrolRef.current.handleSubmit();
        } else if (tabNo == 3) {
            reformRef.current.handleSubmit();
        } else if (tabNo == 4) {
            emergencyRef.current.handleSubmit();
        } else if (tabNo == 5) {
            testRef.current.handleSubmit();
        }

    }

    const footer = <Space style={{float: 'right'}}>
        <Button onClick={props.onClose}>{'取消'}</Button>
        <Button type={`primary`} onClick={() => handleSubmit()}>{'保存'}</Button>
    </Space>


    return (
        <div className={styles.content}>
            <Drawer title={drawerTitle}
                    placement="right"
                    closable={false}
                    open={open}
                    mask={false}
                    getContainer={false}
                    bodyStyle={{width: '100%'}}
                    footer={footer}
            >

                <WorkshopLayoutInfoBasics id={props.id} visible={tabNo == 1} onRef={basicsRef} onChange={props.onChange} treeType={props.treeType} onSuccess={props.onSuccess}/>
                <WorkshopLayoutInfoPatrol id={props.id} visible={tabNo == 2} onRef={patrolRef}/>
                <WorkshopLayoutInfoReform id={props.id} visible={tabNo == 3} onRef={reformRef}/>
                <WorkshopLayoutInfoEmergency id={props.id} visible={tabNo == 4} onRef={emergencyRef}/>
                <WorkshopLayoutInfoTest id={props.id} visible={tabNo == 5} onRef={testRef}/>
                {/*<WorkshopLayoutInfoMaintenance id={props.id} visible={tabNo == 3}/>*/}

            </Drawer>
        </div>
    )
}
export default WorkshopLayoutInfo
